<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<a href="ChanpinServlet?method=toDisplay"></a>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>转盘抽奖</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="box-lottery">
		<div class="lottery-wrap" style="transform: rotate(-45deg);">

			<a href="chanpinServlet?method=toDisplay"> <span
				class="lottery-span1" data-id="8"> <i>京东卡<br>10元
				</i> <img src="img/lottery_01.png" alt="京东卡10">
			</span>
			</a> <a href="chanpinServlet?method=toDisplay"><span
				class="lottery-span2" data-id="7"> <i>京东卡<br>20元
				</i><img src="img/lottery_02.png" alt="京东卡20">
			</span></a> <a href="chanpinServlet?method=toDisplay"> <span
				class="lottery-span3" data-id="6"> <i>京东卡<br>50元
				</i><img src="img/lottery_03.png" alt="京东卡50">
			</span>
			</a> <a href="chanpinServlet?method=toDisplay"><span
				class="lottery-span4" data-id="5"> <i>京东卡<br>100元
				</i><img src="img/lottery_04.png" alt="京东卡100">
			</span></a> <a href="chanpinServlet?method=toDisplay"> <span
				class="lottery-span5" data-id="1"> <i>谢谢参与</i><img
					src="img/lottery_05.png" alt="谢谢参与">
			</span></a> <a href="chanpinServlet?method=toDisplay"> <span
				class="lottery-span6" data-id="4"> <i>京东卡<br>200元
				</i><img src="img/lottery_06.png" alt="京东卡200">
			</span></a> <a href="chanpinServlet?method=toDisplay"> <span
				class="lottery-span7" data-id="3"> <i>京东卡<br>500元
				</i><img src="img/lottery_07.png" alt="京东卡500">
			</span>
			</a> <a href="chanpinServlet?method=toDisplay"><span
				class="lottery-span8" data-id="2"> <i>iQOO Pro<br>手机
				</i><img src="img/lottery_08.png" alt="iQOO Pro">
			</span></a>
		</div>
		<a class="lottery-btn" href="javascript:void(0);"><i></i>立即抽奖</a>
	</div>
	<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script src="js/lib/anime.min.js"></script>
	<script src="js/app/lottery.js"></script>
	<script>
		var Lottery = Turntable.create();
		$('.lottery-btn').on(
				'click',
				function() {
					var num = Math.floor(Math.random() * 8);
					Lottery.start(num, function(index) {
						alert($('span').eq(index).find('i').text());
						console.log('index', index, 'lottery-span',
								'lottery-span' + (index + 1));
					});
				});
	</script>
</body>

</html>